<template>
	<view @click="nextTickQrCodeFocus()">
		<uni-popup ref="popup" type="message">
			<uni-popup-message :type="qrMessages.type" :message="qrMessages.message" :duration="2000"></uni-popup-message>
		</uni-popup>
		
		<uni-popup ref="popup_dialog" type="dialog" minHeight="auto" minWidth="auto" title="提示" >
			<uni-popup-dialog 
			type="warn" 
			cancelText="关闭" 
			confirmText="继续下单" 
			title="提醒" 
			content="当前验货数量已达到下单数量!"
			 @confirm="dialogConfirm" 
			 @close="dialogClose"
			 ></uni-popup-dialog>
		</uni-popup>
		
		<div class="main">
			<div class="layui-rows">
				<!-- 左边 -->
				<div class="main_left ">
					<div class="layui-row">
						<div class="top">
							<image class="share" src="/static/img/list.png"></image>
							<view class="margin-tb">商品列表</view>
							
							<view class="layui-input-inline-left" @click="updateCaoGao" >
								<image class="share" src="/static/img/update_000.png"></image>
							</view>
						</div>
						<!-- 线路 -->
						<div class="left_main ">
							<view class="ipu-box"style="flex: 1;">
								<view class="input_confirms" style="margin-left: 0px;width: 100%;"> <!-- @click="showMisk=true" -->
									<uni-data-select
									:localdata="$routeData.getRoute()"
									v-model="routeId"
									@change="onclickRouteSelect"
									placeholder="选择线路"
									placeholder-class="placeholder-class"
									></uni-data-select>
								</view>
							</view>
						</div>
						<!-- 客户列表 -->
						<div class="order_list">
							<table class="layui-table">
								<thead>
									<tr>
										<th style="width: 20%;">货位号</th>
										<th style="width: 80%;">客户订单</th>
									</tr>
								</thead>
								<tbody >
									<tr 
									v-for="(item,index) in order.data.caogaoList.list" 
									:key="index"
									@click="fun_orderOnClick(index,item.id,item.user_id)"
									:class="order.config.index==index  ? 'select-confirm':''"
									>
										<th style="width: 20%;">{{item.pick_number}}</th>
										<th style="width: 80%;text-align: left;">
											{{item.name}}
											<view class="back_data">
												<image src="/static/img/check.png" class="ico" v-if="item.check.checkSuccess==true"></image>
											</view>
										</th>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<!-- 右 -->
				<div class="main_right layui-col-xs12 layui-col-md9">
					<div class="layui-row">
						<!-- 顶部 -->
						<div class="top">
							<div class="layui-input-inline">
								<input 
								:focus="qrCode.focus" 
								@blur="qrCode.focus=false"
								placeholder="扫码或手动输入商品编码" 
								class="layui-input"
								v-model="qrCode.value"
								@confirm="qrcodeConfirm"
								:key="qrCode.key"
								inputmode="none"
								>
							</div>
							<div class="towbtn" v-if="userData.data">
								<view class="reset" @click="updateOrder()">刷新订单</view>
								<view class="submit" @click="fun_order_print()">订单打印</view>
								
							</div>
							<!-- <view class="layui-input-inline-left" @click="windowOpen" v-if="showShare">
								<image class="share" src="/static/img/share.png"></image>
								<view class="margin-tb">新窗口打开</view>
							</view> -->
						</div>
						<!-- 内容 -->
						<div class="goods_list">
							<table class="layui-table">
								<thead>
									<tr >
										<th >编码</th>
										<th style="text-align: left;">商品名称</th>
										<th >数量</th>
										<th >单价</th>
										<th >合计</th>
										<th >已验货</th>
										<th >备注</th>
									</tr>
								</thead>
								<tbody >
									<!-- 扫描后闪烁 -->
									<!-- 完毕后置换颜色 -->
									<tr 
									v-for="(item,index) in goods.data.goodsList.list" 
									:key="index"
									@click="goods.config.index=index"
									:class="GetClass(index)"
									class="relative checkGoodsLen "
									>
										<!-- 进度条 -->
										<!-- <view class="checkJd" :style="GetStyle(item.check,item.counts)"></view> -->
									
										<td >
											{{item.goods_id}}
											<view class="back_data">
												<image src="/static/img/check.png" class="ico" v-if="item.check>=item.counts"></image>
											</view>
										</td>
										<td style="text-align: left;">
											{{item.goods_name}}
										</td>
										<td class="size18">
											{{item.counts+''+item.goods.units}}
										</td>
										<td @click="openUpdate('money',item.money,item)">
											{{item.money}}
										</td>
										<td >
											{{item.sum_money}}
										</td>
										<td  
										:class="item.check>=item.counts ? 'checkGoodsSuccess':'yiyanhuoCount'" 
										@click="openUpdate('count',item.counts,item)"
										>{{item.check}}</td>

										<td  
										>
											<descr :value="item.descr" :order_id="item.id"></descr>
										</td>
						
										
									</tr>
								</tbody>
							</table>
						</div>
						<!-- 底部 -->
						<div class="total ft16" v-if="goods.data.goodsList.order">
							<view class="left">
								<span class="span"> 应扫：
									<i class="totalMoney mask-profit">{{goods.data.goodsList.goodsCount}}</i> 
								</span>
								
								<span class="span"> 已扫：
									<i class="totalMoney mask-profit"
									
									>{{checkSuccessCount}}</i> 
								</span>
								
								<span class="span"> 金额：
									<i class="totalQuantity mask-profit profit">￥{{goods.data.goodsList.order.money}}</i> 
								</span>
								
								<span class="span"> 毛利：
									<i class="totalIntegral mask-profit" 
									v-if="profitShow==true"
									@click="profitShow = !profitShow"
									:class="goods.data.goodsList.order.profit_ratio<= 10 ?'mask-profit':'profit'"
									>
										￥{{goods.data.goodsList.order.profit}}
									</i> 
									
									
									<i class="totalIntegral mask-profit" 
									v-if="profitShow==false"
									@click="profitShow = !profitShow"
									:class="goods.data.goodsList.order.profit_ratio<= 10 ?'mask-profit':'profit'"
									>
										****
									</i> 
								</span>
							</view>
							
							<div class="layui-input-inline-left">
								<view class="layui-btn delete-a" 
								:class="goods.config.index!=-1 ?'delete-c':'delete-b'"
								@click="fun_order_delete()"
								>
								删除商品
								</view>
							</div>
						</div>
						<!-- 底部 -->
						<table class="reading layui-table" v-if="userData.data">
							<tbody class="foot">
								<tr>
									<td>会员卡号：</td>
									<td>{{userData.data.id}}</td>
									<td>会员姓名：</td>
									<td>{{userData.data.name}}</td>
								</tr>
								<tr>
									<td>共计销量：</td>
									<td>￥{{userData.debt}}</td>
									<td>账户余额：</td>
									<td>￥{{userData.orderSales}}</td>
								</tr>
								
							</tbody>
						</table>
						
					</div>
				</div>
			</div>
		</div>
		<!-- 修改数量 -->
		<uni-popup ref="updateValueBox" type="center" >
			
			<div class="anjian">
				<view style="margin-bottom: 20px;">{{updateTitle}}</view>
				<view class="ti" >
					{{updateValue}}
					<view class="delete-ipu" v-if="updateValue!=''" @click="updateValue=''">
						<img src="/static/img/delete-1.png"  ></img>
					</view>
				</view>
				<div class="sdleft">
					<view class="input" @click="jisuanqi('1')">1</view>
					<view class="input" @click="jisuanqi('2')">2</view>
					<view class="input" @click="jisuanqi('3')">3</view>
					<view class="input" @click="jisuanqi('4')">4</view>
					<view class="input" @click="jisuanqi('5')">5</view>
					<view class="input" @click="jisuanqi('6')">6</view>
					<view class="input" @click="jisuanqi('7')">7</view>
					<view class="input" @click="jisuanqi('8')">8</view>
					<view class="input" @click="jisuanqi('9')">9</view>
					<view class="input" @click="jisuanqi('0')">0</view>
					<view class="input" @click="jisuanqi('00')">00</view>
					<view class="input" @click="jisuanqi('.')">.</view>
				</div>
				<div class="sfrit">
					<div>
						<view class="input" @click="jisuanqi('10')">10</view>
						<view class="input" @click="jisuanqi('12')">12</view>
						<view class="input" @click="jisuanqi('16')">16</view>
						<view class="input" @click="jisuanqi('20')">20</view>
					</div>
					<div class="mio">
						<view class="qingc image"  @click="jisuanqi('-1')">
							<image src="/static/img/qingchu.png" ></image>
						</view>
						<view value="确认" class="que input" @click="jisuanqiConfirm">确认</view>
					</div>
				</div>
			</div>
		</uni-popup>
		
	</view>
</template>

<script>
	import descr from "@/components/descr/descr.vue"
	export default {
		components: {
			descr
		},
		data() {
			return {
				profitShow:false,
				qrCodeType:1,//扫码模式，1=按单扫描 2=全部单混扫
				qrCode:{
					key:-1,
					value:'',//扫描框内容
					focus:true,//焦点
					goodsIndex:-1,//当前扫码的商品索引
					//当前扫描中商品时的索引
					selectCss:'animation-name: selecruser;animation-duration: 500ms;animation-iteration-count: 1;',
				},
				qrMessages:{
					message:'',
					type:'success',//success warn error info
				},
				order:{
					data:{
						caogaoList:{},
					},
					config:{
						index:-1
					}
				},
				checkSuccessCount:0,//扫描成功的
				/**
				 * 待扫描商品列表
				*/
				goods:{
					data:{
						goodsList:{},
					},
					config:{
						index:-1
					}
				},
				
				userData:{
					data:{}
				},
				routeId:'',
				updateTitle:'',
				showShare:true,
				updateType:-1,//修改类型
				updateValue:'',//输入的新内容
				goodsData:{},//现在在修改的商品
				innerAudioContext:null,
			}
		},
		onLoad() {
			this.showShare = false
			this.routeId = this.$routeData.GetNowRoute()
			this.fun_GetMenuCaogao()
			this.recordingTimer(true)
		},
		created() {
			this.routeId = this.$routeData.GetNowRoute()
			this.fun_GetMenuCaogao()
		},
		watch:{
			show(e,r){
				if(e==false){
					this.recordingTimer(false)
				}else{
					this.recordingTimer(true)
				}
			}
		},
		
		 // 此处定义传入的数据
		props: {
			show: {//是否可见
				type: Boolean,
				default: true
			},
		},
		methods: {
			playMusic() {
				
				this.innerAudioContext = uni.createInnerAudioContext()
			
				this.innerAudioContext.src = '/static/img/scan-video.mp3'
				this.innerAudioContext.onPlay(() => {
					//console.log({scanCodeValue:that.scanCodeValue})
					//that.back({scanCodeValue:that.scanCodeValue})
				})
				this.innerAudioContext.onError((res) => {
					//console.log("res",res)
					//that.back()
				})
			},
			updateOrder(){
				this.funCreateOrderList(this.goods.data.goodsList.order.id)
			},
			recordingTimer(start=false){
				var that = this
				clearInterval(that.TimerInit) 
				 
				if (start != false) { 
					that.TimerInit = setInterval(function() { //将计时器赋值给 TimerInit 
						that.nextTickQrCodeFocus()
					}, 1000);
					 
				} else { 
					clearInterval(that.TimerInit) 
				} 
			},
			
			jisuanqi(value){
				if(value!=-1){
					this.updateValue = this.updateValue+''+value
				}else{
					var str = this.updateValue
					if(str!=''){
						str=str+''
						this.updateValue = str.slice(0, -1);
					}
				}
			},
			// 继续加单
			dialogConfirm(){
				var goodsIndex = this.qrCode.goodsIndex
				var item = this.goods.data.goodsList.list[goodsIndex]
				
				this.updateType = 'count'
				this.updateValue = Number(item.counts)+1
				
				item.check = Number(item.counts)+1
				this.goodsData = item
				
				this.fun_order_update()
			},
			
			// 继续修改
			jisuanqiConfirm(){
				if(this.updateType == 'count'){
					this.goodsData.check = this.updateValue
				}
				
				this.fun_order_update()
			},
			// 取消加单
			dialogClose(){
				
			},
			// 显示消息弹窗
			popupMessagesSHow(type,message){
				this.qrMessages.message = message
				this.qrMessages.type = type
				this.$refs.popup.open()
			},
			/**
			 * 获取商品行的css
			*/
			GetStyle(check,counts){
				
				var style = ''
				if(check>0){
					var len_left = check / counts * 100;
					style = `width: ${len_left}%;`
				}
				return style
			},
			GetClass1(index,check){
				var data = ''
			
				if(this.mune.caogao.checked == index){
					data += ' goods-list-select'
				}
			
				if(this.qrCode.orderIndex == index){
					data += ' show-select'
				}
				return data
			},
			
			/**
			 * 获取商品行的css
			*/
			GetClass(index){
				var data = ''
				if(this.goods.config.index == index){
					data += ' select-confirm'
				}
			
				if(this.qrCode.goodsIndex == index){
					data += ' show-select'
				}
				return data
			},
			/**
			 * 手动验货
			*/
			goodsCheckPass(orderId,index){
				this.checkGoodsPass(orderId)
				this.updateGoodsItemCheckPass(index)
			},
			/**
			 * 扫描框回车验货回调
			*/
			qrcodeConfirm(event){
				// 获取input事件的参数
				const value = event.detail.value;
				
				this.qrCode.value = ""

				const goodsIndex =  this.checkQrCodeGoodsId(value)

				this.qrCode.key   =  Math.floor(Math.random() * 100) + 1;
				
				this.qrCode.goodsIndex = goodsIndex
				 

				this.nextTickQrCodeFocus()
				
				if(goodsIndex < 0 ){
					this.popupMessagesSHow('error','当前单据中找不到此商品')
					return;
					
				}else if(this.goods.data.goodsList.list.length >= goodsIndex){
					var item = this.goods.data.goodsList.list[goodsIndex]
					if(item.counts < (item.check + 1)){
						this.$refs.popup_dialog.open()
						return
					}
					//验货通过
					const orderId= item.id
					this.checkGoodsPass(orderId)
					this.updateGoodsItemCheckPass(goodsIndex)
					this.innerAudioContext.play()
				}
			},
			/**
			 * 扫描框植入焦点
			*/
			nextTickQrCodeFocus(){
				this.qrCode.focus = false
				var that = this
				this.$nextTick(()=>{
					that.qrCode.focus = true
				})
			},
			/**
			 * 过账
			*/
			fun_user_gz(id){
				var that = this
				var orderId = this.order.list[this.order.config.index].id
				
				var arr  = []
				arr.push(orderId)
				
				var json_data = JSON.stringify(arr)
				
				that.$common.get_request(
					{
						type:'user_gz',
						json_data:json_data,
					},
					(res)=>{
						that.$common.toast(res.msg)
					}
				);
			},
			/**
			 * 草稿单-打印
			 * type : 1=全部打印 2= 指定打印 ，此时orderId不能为空
			 * 
			*/
			fun_order_print(){
				var that = this
				var arr  = [];
				var orderId = this.order.list[this.order.config.index].id
				arr.push(orderId)
				var jsonData = JSON.stringify(arr)

				that.$common.get_request(
					{
						type:'order_print_send',
						json_data:jsonData,
					},
					(res)=>{
						that.$common.toast(res.msg)
					}
				);
			},
			/**
			 * 当前订单没有此商品，弹出是否增加
			*/
			noGoods(){
				
			},
			/**
			 * 草稿单-刷新
			*/
			updateCaoGao(){
				this.fun_GetMenuCaogao()
				this.userData ={}
				this.goods.data.goodsList = {}
				this.goods.data.goodsList = {}
				this.goods.config.index =-1
				this.order.config.index=-1
			},
			/**
			 * 草稿单-删除商品
			*/
			fun_order_delete(){
				var that = this
				var index = this.goods.config.index
				if(index<=-1){
					this.popupMessagesSHow('error','未选择商品，无法删除')
					return
				}
				
				uni.showModal({
					content: '是否确定删除？此操作不可逆。删除后有关信息无法恢复！',
					success: function (res) {
						if (res.confirm) {
							
							
							let order_ids = that.goods.data.goodsList.list[index].id
							that.$common.get_request(
								{
									type:'order_delete',
									order_ids:order_ids,
								},
								(res)=>{
									that.goods.data.goodsList.list.splice(index,1)
									that.funCreateOrderList(that.goods.data.goodsList.order.id)
									
								}
							);
						}
					}
				});
				
			},
			/**
			 * 草稿单-修改参数
			*/
			fun_order_update(){
				var that = this
				if(this.updateType == 'money' || this.updateType == 'count'){//先删除
					if(this.updateType == 'money' ){
						that.goodsData.money = this.updateValue
						
					}else if(this.updateType == 'count' ){
						that.goodsData.counts = this.updateValue
					}
					
					that.$common.get_request(
						{
							type:'order_delete',
							order_ids:that.goodsData.id,
						},
						(res)=>{
							//重新下单
							that.$common.get_request(
								{
									type:'create_order',
									goods_id:that.goodsData.goods_id,
									types:that.goodsData.type,
									user_id:that.userData.data.id,
									count:that.goodsData.counts,
									money:that.goodsData.money,
									pifajia:that.goodsData.pifajia,
									bare_money:that.goodsData.bare_money,
									order_id:that.goods.data.goodsList.order.id,
									descr:that.goodsData.descr,
									check:that.goodsData.check,
								},
								(e)=>{
									
									that.goods.data.goodsList.order.id = e.order_id
									that.funCreateOrderList(e.order_id)
									
									this.$refs.updateValueBox.close()
									
									that.popupMessagesSHow('success','成功加单！')
								}
							);
						}
					);
					return;
					
				}
			},
			
			/**
			 * 寻找商品ID，
			*/
			checkQrCodeGoodsId(goodsId){
				if(this.qrCodeType == 1){
					if(this.goods.data.goodsList && this.goods.data.goodsList.list){
						var list = this.goods.data.goodsList.list
						for(var i=0;i<list.length;i++){
							if(list[i].goods_id == goodsId){
								return i
							}
						}
					}
					return -1;
				}else{
				
				}
			},
			/**
			 * 打开窗口修改
			*/
			openUpdate(type,value,item){
				this.goodsData = item
				this.updateTitle = type=="count" ?'修改商品数量':'修改商品单价'
				this.updateType = type
				this.updateValue = value
				this.$refs.updateValueBox.open()
			},
		
			/**
			 * 线路 -选择了某个
			*/
			onclickRouteSelect(e){
				this.routeId = e
				this.$routeData.SetNowRoute(e)
				this.fun_GetMenuCaogao()
			},
		
			/**
			 * 修改本地商品数据中的 checkPass字段
			*/
			updateGoodsItemCheckPass(index){
				if(	this.goods.data.goodsList.list.length >= index){
					this.goods.data.goodsList.list[index].check++
				}
			},
			/**
			 * 手动验货通过
			*/
			checkGoodsPass(orderIds){
				var that = this
				that.$common.get_request(
					{
						type:'checkGoodsPass',
						order_ids:orderIds,
					},
					(res)=>{
					
						that.popupMessagesSHow('success',res.msg)
					}
				);
			},
			/**
			 * 用户-查询某个信息
			*/
			user_info(uid){
				var that = this
				//初始化历史单据
				that.$common.get_request(
					{
						type:'user_info',
						uid:uid,//搜索内容
					},
					(res)=>{
						that.userData = res
					}
				);
			},
			
			/**
			 * 草稿-获取
			*/
			fun_GetMenuCaogao(){
				var that = this
				that.order.data.caogaoList = {}
				
				that.$common.get_request(
					{
						type:'order_all_admin',
						types: 2,//1=客户 2=线路
						isprint: 1,//2=已打印 3=未打印
						route_id:that.routeId,//区分供应商草稿单不应该存在线路ID
						accomplish:3,//是否已过账 0=开单中 1=拣货中 2=已过账 3=不等于2
						supplier:0,//区分供应商草稿单
						goods_value: '',
						goods_check: 1,//是否验货的时候获取的
					},
					(res)=>{
						that.order.config.index = -1
						that.order.data.caogaoList = res
					}
				);
			},
			
			/**
			 * 草稿-被点击
			 * 获取客户个人信息及当前草稿单详细内容
			*/
			fun_orderOnClick(index,order_id,user_id){
				this.order.config.index = index
				this.goods.config.index = -1
				this.funCreateOrderList(order_id)
				this.user_info(user_id)
			},
			
			/**
			 * 草稿单-获取
			*/
			funCreateOrderList(order_id){
				var that = this
				that.goods.data.goodsList = {}
				that.$common.get_request(
					{
						type:'create_order_list',
						order_id: order_id,
						greater:true,//只获取商品数＞0的
					},
					(res)=>{
						that.goods.config.index = -1
						that.goods.data.goodsList = res
						that.nextTickQrCodeFocus()
						
						var checkSuccessCount = 0;
						if(res.list.length>0){
							
							 res.list.forEach((item, index) => {
								 if(item.check > 0){
									checkSuccessCount += item.check;
								 }
							 })
						}
						that.checkSuccessCount = checkSuccessCount
					}
				);
			},
			/**
			 * 外部打开新窗口
			*/
			windowOpen(){
				window.open(this.$common.baseUrl.host+'/admin/#/pages/examine_goods/examine_goods')
			}
		}
	}
</script>

<style>
	.checkGoodsSuccess{
		background-color: #1ab500;
		color: #fff;
		font-weight: 600;
		font-size: 18px;
	}
	
	.yiyanhuoCount{
		color: #F52631;
		font-weight: 600;
		font-size: 14px;
	}
	.ti{
		border: solid 1px #eee;
		margin: 5px 0px;
		background-color: #fff;
		border-radius: 8px;
		height: 45px;
		justify-content: center;
		flex-direction: column;
		display: flex;
		position: relative;
		font-size: 18px;
		font-weight: 600;
	}
	/* 扫描了闪烁 */
	.show-select{
		animation-name: selecruser;animation-duration: 500ms;animation-iteration-count: 1;
		background-color: #ff000017;
	}
	@keyframes selecruser {
		0% {
			background-color: #dfdfdf;
			color: #333;
		}
		50%{
			background-color: #F52631;
			color: #fff;
			
		}
		100% {
			background-color: #dfdfdf;
			color: #333;
		}
	}
	
	.delete-c{
		background-color: #f7f7f7;
		color: #d10000db;
		border: solid 1px #d1000078;
	}
	.delete-b{
		border: 1px solid #C9C9C9;
		background-color: #fff;
		color: #555;
	}
	.delete-a{
		/* vertical-align: middle; */
		vertical-align: middle;
		padding: 0px 16px;
		border-radius: 2px;
		cursor: pointer;
		/* display: inline-block; */
		margin: auto 1px;
		width: 55px;
		justify-content: center;
		display: flex;
	}
	.foot{
		color: #333;
		font-size: 14px;
	}
	.select{
		background-color: #0074cb;
		color: #F52631;
	}
	.select-confirm{
	    background-color: #0074cb;
		color: #fff;
	}
	.updateMask{
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		background-color: #3333334f;
		width: 100%;
		height: 100%;
		display: flex;
	}
	.relative{
		position: relative;
	}
	.checkGoodsLen:before {
		background-color: #dfdfdf;
		height: 100%;
		position: absolute;
		left: 0px;
		top: 0px;
	}

	.towbtn {
	    text-align: center;
	    overflow: hidden;
	    padding: 10px 0 20px;
		display: flex;
		margin-left: auto;
	}
	.checkGoods{
		background-color: #0074cb;
		color: #fff;
		position: absolute;
		right: 0px;
		top: 50%;
		padding: 3px 10px;
		justify-content: center;
		flex-direction: column;
		border-radius: 8px;
		border: solid 1px #33333347;
		margin: auto;
		display: flex;
		transform: translate(0%, -50%);
	}
	.towbtn .submit {
	    padding: 0px 10px;
		background: #0074cb;
		color: #fff;
		border-radius: 4px;
		border: none;
		cursor: pointer;
		margin: 0px 20px;
		height: 30px;
		justify-content: center;
		display: flex;
		flex-direction: column;
	}
	.towbtn .submit:hover{
		border: solid 1px #0074cb;
	}
	.towbtn .reset {
	    padding: 0px 10px;
	    border-radius: 4px;
	    cursor: pointer;
	    display: inline-block;
	    background: #fff;
	    color: #666;
	    border: 1px solid #999;
		margin: 0px 20px;
		display: flex;
		height: 30px;
		justify-content: center;
		display: flex;
		flex-direction: column;
	}
	.towbtn .reset:hover{
		border: solid 1px #0074cb;
	}
	.layui-table {
	    width: 100%;
	    background-color: #fff;
	    color: #333;
		font-size: 14px;
	}
	.size18{
		font-weight: 600;
		font-size: 18px;
	}
	table {
	    border-collapse: collapse;
	    border-spacing: 0;
	}
	table {
	    position: relative;
	}
	.layui-table td, .layui-table th, .layui-table-fixed-r, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
	    border-width: 1px;
	    border-style: solid;
	    border-color: #e6e6e6;
	}
	.layui-table thead tr{
	    background-color: #f2f2f2;
	}
	.total {
	    /* height: 50px; */
	    line-height: 50px;
	    border-top: 1px solid #eaeaea;
	    border-bottom: 1px solid #eaeaea;
	    background: #f2f2f2;
	    padding: 0 10px;
	}
	.total .left{
		display: flex;
		width: calc(100% - 80px);
		height: auto;
	}
	.total .left .span{
		 width: 25%;
	}
	.ft16 {
	    font-size: 16px;
		display: flex;
	}
	.total .mask-profit {
	    color: #F52631;
		font-synthesis: none;
		margin-right: 10px;
		font-weight: 600;
	}
	.total .profit {
	    color: #008718;
	}
	.reading {
	    margin-top: 40px;
	}
	table.reading tr td:nth-child(2n-1) {
	    width: 15%;
	}
	.layui-table td, .layui-table th {
	    position: relative;
	    padding: 10px 5px;
	    min-height: 20px;
	    line-height: 20px;
	}
	.card_reading {
	    background: #0074cb;
	}
	.card_reading {
	    background: #0074cb;
	}
	.checkGoodsSelect{
		background-color: #dddddd;
		color: #333;
	}
	.layui-btn+.layui-btn {
	    margin-left: 10px;
	}
	table.reading tr td:nth-child(2n) {
	    width: 35%;
	}
	.layui-row{
		height: 100%;
	}
	.order_list {
		height: calc(100% - 85px);
		overflow-y: scroll;
	}
	.goods_list {
		height: calc(100% - 240px);
		overflow-y: scroll;
	}
	.layui-btn-primary {
		border: 1px solid #C9C9C9;
		background-color: #fff;
		color: #555;
		vertical-align: middle;
		padding: 0px 16px;
		border-radius: 2px;
		cursor: pointer;
		display: inline-block;
		margin: auto 1px;
	}
	*{
		border-color: #e6e6e6;
	}
	.layui-input-inline-left{
		display: inline-flex;
		vertical-align: middle;
		position: relative;
		margin-left: auto;
		font-size: 14px;
	}
	.layui-input-inline-left:hover{
		border: solid 1px #eee;
	}
	.layui-input-inline {
	    display: inline-flex;
	    vertical-align: middle;
		position: relative;
		margin: 0px ;
	}

	.top .layui-input {
	    margin: auto;
		display: flex;
	}
	.layui-input, .layui-btn, .layui-select {
	    height: 30px;
	    line-height: 30px;
	}
	.layui-input, .layui-textarea {
	    display: block;
	    width: 100%;
	    padding-left: 10px;
	}
	.layui-input, .layui-select, .layui-textarea {
		margin: auto 0px;
	    line-height: 1.3;
	    line-height: 38px \9;
	    border-width: 1px;
	    border-style: solid;
	    background-color: #fff;
	    border-radius: 2px;
	}

	.main{
		background: #fff;
		width: 100%;
		height: auto;
	}
	.layui-rows{
		display: flex;
		height: 100%;
		position: absolute;
		width: 100%;
	}
	.main_left{
		border-right: 5px solid #F6F7F9;
		width: 25%;
	}
	.share{
		width: 30px;
		height: 30px;
		margin: auto 5px auto 0px;
	}
	.top {
		display: flex;
		padding: 0 10px;
		height: 50px;
		/* border-bottom: 1px solid #ebebeb;
		border-top: 1px solid #ebebeb; */
	}
	.margin-tb{
		margin: auto 0px;
	}
	.left_main {
		padding:  0px;
		display: flex;
		width: 100%;
		height: 40px;
	}

	.main_right {
		width: 75%;
	}
	.checkJd{
		position: absolute;
		background-color: #1ab500;
		bottom: 0px;
		transition: background-size 0.5s ease-in-out;
		height: 3px;
		left: 0px;
	}
	.anjian{
		background-color: #fff;
		width: calc(100% - 20px);
		margin: 0 auto;
		overflow: hidden;
		padding: 10px;
		border-radius: 8px;
			
	}
	.bing_box{ width: 100%;padding-top: 10px; margin-top: 30px;border-top: 2px solid #0099cc;background-color: #f8f3ed;}
	.anjian .input,.anjian  .image{ height: 60px; border-radius: 5px;}
	.anjian .input.que{ min-height: 190px;}
	.anjian .sdleft{ float: left; width: 60%; }
	.anjian .sdleft .input{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 29.3%; float: left; background-color: #73b7b8; color: #fff; border: none; font-size: 22px; margin: 2%;}
	.anjian .sdleft .input:hover{background-color: #6d94a3;}
	
	.anjian .sfrit{ float: left; width: 40%;overflow: hidden;}
	.anjian .sfrit div{ overflow: hidden; width: 50%; float: left;}
	.anjian .sfrit .input, .anjian .sfrit .image{justify-content: center;
    display: flex;
    flex-direction: column;width: 94%; float: left; background-color: #cb636e; border: none; color: #fff; margin: 6%;font-size: 22px;}
	.anjian .sfrit .input:hover{ background-color: #b56162;}
	/* .anjian .sfrit .mio{padding-left: 1%;} */
	.anjian .sfrit .qingc{background-size:35px; background-color: #cb636e;display: flex;;}
	.anjian .sfrit .qingc image{
		width: 30px;
		height: 30px;
		margin: auto;
	}
</style>
